<template>
  <div>
    <h3>flex布局</h3>
    <el-form :inline="true" size="mini">
      <el-form-item label="子元素个数">
        <el-input v-model="numbers"></el-input>
      </el-form-item>
      <el-form-item label="子元素高度">
        <el-input v-model="itemSpanHeight"></el-input>
      </el-form-item>
    </el-form>


    <div>
      <span style="display: inline-block;width: 120px;">flexDirection:</span>
      <el-button v-for="flexDirection in flexDirections"
                 @click="parentDiv.flexDirection=flexDirection"  size="mini">{{ flexDirection }}</el-button>
    </div>
    <div>
      <span style="display: inline-block;width: 120px;">flexWrap:</span>
      <el-button v-for="flexWrap in flexWraps"
                 @click="parentDiv.flexWrap=flexWrap"  size="mini">{{ flexWrap }}</el-button>
    </div>
    <div>
      <span style="display: inline-block;width: 120px;">justifyContent:</span>
      <el-button v-for="justifyContent in justifyContents"
                 @click="parentDiv.justifyContent=justifyContent" size="mini">{{ justifyContent }}</el-button>
    </div>
    <div>
      <span style="display: inline-block;width: 120px;">alignItems:</span>
      <el-button v-for="alignItems in alignItemsList"
                 @click="parentDiv.alignItems=alignItems"  size="mini">{{ alignItems }}</el-button>
    </div>
    <div>
      <span style="display: inline-block;width: 120px;">alignContent:</span>
      <el-button v-for="alignContent in alignContents"
                 @click="parentDiv.alignContent=alignContent"  size="mini">{{ alignContent }}</el-button>
    </div>

    <div :style="parentDiv" id="parentDiv">
      <span v-for="number in generateArray(numbers)" class="item-span" :style="{height: itemSpanHeight}">{{ number }}</span>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      parentDiv: {
        display: "flex",
        flexDirection: "row",
        flexWrap: "nowrap",
        justifyContent: "flex-start",
        alignItems:"stretch",
        alignContent:"stretch"
      },
      flexDirections:["row","column","row-reverse","column-reverse"],
      flexWraps:["nowrap","wrap","wrap-reverse"],
      justifyContents:["flex-start","center","flex-end","space-between","space-around"],
      alignItemsList:["stretch","flex-start","center","flex-end","baseline"],
      alignContents:["stretch","flex-start","center","flex-end","space-between","space-around"],
      itemSpanHeight:"100px",
      numbers:3,
    }
  },
  methods: {
  },
  computed: {
    generateArray() {
      return n => Array.from({ length: this.numbers }, (_, index) => index + 1);
    },
  },
}

</script>



<style>
.item-span {
  width: 200px;
  border: 1px solid #ccc;
}

#parentDiv {
  border: red 2px solid;
  height: 400px;
  width: 1000px;
}




</style>
